<template>
    <div class="flex h-screen w-full">
        <div class="flex w-[200px] flex-col justify-between bg-blue-50 p-5 shadow-md">
            <div>
                <!-- 关键功能：显示问候语与称谓，称谓来源个人信息的性别 -->
                <div class="mb-4 text-center">
                    <div class="text-2xl font-bold text-blue-600">您好，</div>
                    <div class="mt-1 text-xl font-semibold text-gray-800">{{ displayName }}{{ honorific }}</div>
                </div>
                <div class="flex flex-col gap-y-4">
                    <!-- 主页按钮 -->
                    <var-button color="#88cbf6" text-color="black" @click="navigateTo('home')">
                        <var-icon name="home" class="mr-2" />
                        主页
                    </var-button>

                    <!-- 历史记录按钮 -->
                    <var-button color="#88cbf6" text-color="black" @click="navigateTo('history')">
                        <var-icon name="history" class="mr-2" />
                        历史记录
                    </var-button>

                    <!-- 个人信息按钮 -->
                    <var-button color="#88cbf6" text-color="black" @click="navigateTo('information')">
                        <var-icon name="account-circle" class="mr-2" />
                        个人信息
                    </var-button>
                </div>
            </div>

            <!-- 退出登录按钮 -->
            <div class="mt-auto">
                <!-- 关键功能：退出按钮与上方按钮宽度一致并居中 -->
                <var-button type="danger" block class="mx-auto" @click="askLogout">
                    <var-icon name="logout" class="mr-2" />
                    退出登录
                </var-button>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="flex-1 overflow-y-auto bg-gray-50">
            <router-view />
            <!-- 关键功能：页面级 Snackbar 组件实例 -->
            <Snackbar v-model:show="snackShow" :type="snackType" position="top" :duration="2000"
                :content="snackContent" />
            <!-- 关键功能：退出登录确认弹窗 -->
            <Dialog v-model:show="showLogoutDialog" title="确认退出" message="确定要退出登录吗？" @confirm="confirmLogout" />
        </div>
    </div>
</template>

<script>
import authentication from '@/utils/authentication'
import Snackbar from '@/components/snackbar.vue'
import userApi from '@/api/user'
import Dialog from '@/components/dialog.vue'

export default {
    name: 'MainLayout',
    components: { Snackbar, Dialog },
    data() {
        return {
            // 关键功能：统一页面级提示的显示状态与内容
            snackShow: false,
            snackType: 'success',
            snackContent: '',
            // 关键功能：问候语相关的用户信息
            displayName: '用户',
            honorific: '先生',
            // 关键功能：退出确认弹窗显示状态
            showLogoutDialog: false
        }
    },
    computed: {
        currentRoute() {
            return this.$route.name
        }
    },
    methods: {
        navigateTo(routeName) {
            this.$router.push({ name: routeName })
        },
        async loadUserInfo() {
            try {
                const resp = await userApi.getMyInfo()
                const data = resp?.data?.data ?? resp?.data
                if (data) {
                    // 关键功能：根据性别设置称谓，默认先生
                    this.displayName = data.name || data.account || '用户'
                    this.honorific = data.gender === '女' ? '女士' : '先生'
                }
            } catch (e) {
                // 静默失败，保持默认称谓
            }
        },
        // 关键功能：触发退出确认弹窗
        askLogout() {
            this.showLogoutDialog = true
        },
        // 关键功能：确认退出后执行退出逻辑
        confirmLogout() {
            // 关键功能：显示退出登录提示
            this.snackType = 'success'
            this.snackContent = '已退出登录'
            this.snackShow = true
            // 清除token
            authentication.removeToken()
            // 延迟跳转到登录页
            setTimeout(() => {
                this.$router.push({ name: 'auth' })
            }, 1000)
        }
    },
    mounted() {
        this.loadUserInfo()
    }
}
</script>

<style scoped>
/* All styles are now handled by Tailwind CSS */
</style>